<script>
    function getFileName(line){
        // Skip "|", "└", "├" found in file tree
        const index = line.search(/[a-zA-Z0-9]/);
        return line.subSting(index).trim();
    }

    function toggleFile(element) {
        const patternInput = document.getElementById("pattern");
        const patternFiles = patternInput.value ? patternInput.value.split(",").map(item => item.trim()) : [];

        if(element.textContent.includes("Directory structure:")){
            return;
        }

        element.classList.toggle('line-through');
        element.classList.toggle('text-gray-500');

        const fileName = getFileName(element.textContent);
        const fileIndex = patternFiles.indexOf(fileName);

        if (fileIndex != -1){
            patternFiles.splice(fileIndex, 1);
        } else {
            patternFile.push(fileName);
        }

        patternInput.value = patternFiles.join(", ");
    }
</script>
{% if result %}
    <div class="mt-10" data-result>
        <div class="relative">
            <div calss="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
            <div class="bg-[#fafafa] rounded-xl border-[3px] border-gray-900 p-6 relative z-20 space-y-6">
                <!--Summary and Directory Structure -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                    <!--Summary Column -->
                    <div class="md:col-span-5">
                        <div class="flex justify-between items-center mb-4 py-2">
                            <h3 class="text-lg font-bold text-gray-900">Summary</h3>
                        </div>
                        <div class="relative">
                            <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                            <textarea class="w-full h-[160px] p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-none focus:outline-none relative z-10"
                                      readonly>{{ summary }}</textarea>
                        </div>
                        {% if ingest_id %}
                            <div class="relative mt-4 inline-block group">
                                <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                                <a href="/download/{{ ingest_id }}"
                                    class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
                                    <svg class="w-4 h-4 mr-2"
                                         fill="none"
                                         stroke="currentColor"
                                         viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                        </svg>
                                        Download
                                </a>
                            </div>
                            <div class="relative mt-4 inline-block group ml-4">
                                <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                                <button onclick="copyFullDigest()"
                                        class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
                                    <svg class="w-4 h-4 mr-2"
                                         fill="none"
                                         stroke="currentColor"
                                         viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                    </svg>
                                    Copy all
                                </button>
                            </div>
                        {% endif %}
                    </div>
                    <!-- Directory Structure Column -->
                    <div class="md:col-span-7">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-bold text-gray-900">Directory Structure </h3>
                            <div class="relative group">
                                <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                                <button onclick="copyText('directory-structure')"
                                        class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                    </svg>
                                    Copy
                                </button>
                            </div>
                        </div>
                        <div calss="relative">
                            <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                            <div class="border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10 h-[215px] overflodirectory-structure w-full p-4 bg-[#fff4da] border-[3px] w-auto"
                                 id="directory-structure-container"
                                 readonly>
                                 <input type="hidden" id="directory-structure-content" value="{{ tree }}" />
                                 {% for line in tree.splitlines() %}
                                    <pre name="tree-line"
                                        class="cursor-pointer hover:line-through hover:text-gray-500"
                                        onclick="toggleFile(this)">{{ line }}</pre>
                                 {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Full Digest -->
                <div>
                    <div class="flex justfy-between items-cneter mb-4">
                        <h3 class="text-lg font-bold text-gray-900">Files Content</h3>
                        <div class="relative group">
                            <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                            <button onclick="copyText('result-text')"
                                    class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linjoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                </svg>
                                Copy
                            </button>
                        </div>
                    </div>
                    <div class="relative">
                        <div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
                        <textarea calss="result-text w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10"
                                  style="min-heigth:{{'600px' if content else 'calc(100vh-800px)'}}"
                                  readonly>{{ content }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}
